/**
 * create by cyw 2020-5-28
 * 首页订单列表子组件
 * */
import "./ListItem.scss"

import React from 'react'
import { connect } from "react-redux"

class ListItem extends React.Component {
    constructor(props) {
        super(props)
    }
    renderTotalPrice(data, item, index) {
        return (
            <div className="product-item" key={index}>
                <span>...</span>
                <div className="p-total-count">
                    总计{item.product_count}个菜,实付
        <span className="total-price">￥{data.total}</span>
                </div>
            </div>
        )
    }
    //渲染菜品
    renderProduct(data) {
        let list = data.product_list;
        list.push({ type: 'more' })
        return list.map((item, index) => {
            if (item.type === 'more') {
                return this.renderTotalPrice(data, item, index)
            }
            return (
                <div className="product-item" key={index}>
                    {item.product_name}
                    <div className="p-count">x{item.product_count}</div>
                </div>
            )
        })
    }
    //渲染评价
    renderComment(data) {
        let evaluation = !data.is_comment;
        if (evaluation) {
            return (
                <div className="evaluation clearfix">
                    <div className="evaluation-btn">评价</div>
                </div>
            )
        }
        return null
    }
    render() {

        let data = this.props.itemData;
        return (
            <div className="order-item">
                <div className="order-item-inner">
                    <img src={data.poi_pic} alt="" className="item-img" />
                    <div className="item-right">
                        <div className="item-top">
                            <p className="order-name one-line">{data.poi_name}</p>
                            <div className="arrow"></div>
                            <div className="order-state">{data.status_description}</div>
                        </div>
                        <div className="item-bottom">
                            {this.renderProduct(data)}
                        </div>
                    </div>
                </div>
                {this.renderComment(data)}
            </div>
        )
    }
}
export default connect(

)(ListItem)